<template>
  <div class="job">
    <div class="jobtypeStatus">
      <el-button type="primary" class="span-hasEnded"
        :class="{'span-onlineBooking': jobtypeStatusIndex== (index==0 ? '' : index)}" @click="jobtypeStatus(index)"
        v-for="(item,index) in jobtypeStatusBtn" :key="index">{{jobtypeStatusBtn[index][1]}}</el-button>
    </div>
    <div class="jobFairList" v-for="(item,index) in jobFairList" :key="index">
      <div>
        <h1 class="jobFair_name">
          <a :href="'/#/jobFairDetails?id='+ item.id">{{item.title}} </a></h1>

        <div class="jobFair_info">
          <div>
            <p class="jobFair_Holding">
              <span><i class="el-icon-time"
                  style="color:rgba(24,147,252,1);margin-right:5px;font-size:16px;"></i>举办时间：{{item.holdTime || ''}}</span>
              <span><i class="el-icon-phone"
                  style="color:rgba(24,147,252,1);margin-right:5px;font-size:16px;"></i>联系电话：{{item.phone || ''}}</span>
            </p>
          </div>
        </div>
        <p class="jobFair_SponsorUnit">
          <span>主办单位：{{item.sponsor || ''}}</span>
          <span>承办单位：{{item.organizer || ''}}</span>
        </p>
      </div>
      <div class="jobFair_btnSee">
        <el-button type="primary"
          :class="statusText[(item.auditStatus ||(item.auditStatus==0)) ? item.auditStatus : 4][0]"
          @click="viewResume(index, item)">
          {{statusText[(item.auditStatus ||(item.auditStatus==0)) ? item.auditStatus : 4][1]}}</el-button>
        <el-button type="primary" v-if="item.auditStatusTwo"
          :class="statusText[(item.auditStatusTwo ||(item.auditStatusTwo==0)) ? item.auditStatusTwo : 4][0]"
          @click="viewResumeTwo(index, item)">{{statusText[item.auditStatusTwo ? item.auditStatusTwo : 4][1]}}
        </el-button>
      </div>
      <span class="jobFair_roofPlacement" v-if="item.topStatus == 1">
        <img src="../../../assets/img/zhiding.png" alt="">
      </span>
    </div>
    <div class="noData" v-show="jobFairList.length<=0">
      暂无数据
    </div>
    <div class="pagination" style="text-align: center;margin-top: 30px;">
      <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { jobfairList, jobFairStatus, selectcompanybyuserid } from '../../../api/jobfair';
export default {
  name: 'jobfair',
  data () {
    return {
      ENV: process.env,
      // 选择状态查询
      jobtypeStatusBtn: {
        0: ['span-onlineBooking', '全部'],
        1: ['span-hasEnded', '预约审核中'],
        2: ['span-hasEnded', '预约已通过'],
        3: ['span-hasEnded', '已结束']
      },
      // 索引传递
      jobtypeStatusIndex: '',
      // 状态传递
      jobtypeStatusVal: '',
      // 对应不同状态 显示不同按钮 以及颜色
      //   statusText: {
      //     4: ['span-onlineBooking', '在线预订'],
      //     0: ['span-booked', '已预约'],
      //     5: ['span-participating ', '参会职位'],
      //     3: ['span-hasEnded', '已结束'],
      //     1: ['span-appointmentpassed', '预约已通过'],
      //     2: ['span-notPass', '未通过']
      //   },

      statusText: {
        4: ['span-onlineBooking', '在线预约'],
        0: ['span-booked', '已预约'],
        5: ['span-participating ', '参会职位'],
        3: ['span-hasEnded', '已结束'],
        1: ['span-appointmentpassed', '预约已通过'],
        2: ['span-notPass', '预约未通过'],
        6: ['span-notPass ', '修改信息']
      },

      // 1、在线预约 2、已预约 3、预约已通过 4、预约未通过
      // 查询列表
      jobFairList: [],
      // 分页
      pagination: {
        total: 1,
        page: 1
      }
    }
  },
  methods: {
    // 点进去 查看列表详情
    viewResume (val, item) {
      // 如果是已结束的状态 不予执行下面的逻辑
      if (item.auditStatus == 3) return
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });

      selectcompanybyuserid().then((res) => {
        if (res.success) {
          loading.close()
          if (res.data.socialSecurityAuthStatus != 2) {
            // 二次确认
            this.$confirm('预定招聘会需要您完成企业社保认证', '系统通知', {
              type: 'warning'
            }).then(() => {
              this.$router.push({
                path: '/security?companyId=' + res.data.id
              })
            }).catch(() => {
              loading.close()
            });
          } else {
            if (!item.auditStatus) {
              this.$router.push({
                path: '/jobFairBooking',
                query: {
                  id: item.id
                }
              })
            }
          }
        }
      })
    },
    viewResumeTwo (val, item) {
      console.log(val)
      if (item.auditStatusTwo == 6) {
        this.$router.push({
          path: '/modifyInformation',
          query: {
            id: item.id
          }
        })
      }
    },
    // 分页请求
    currentChange (val) {
      console.log(val, 'currentChange 请求')
      this.pagination.page = val
      this.jobfairList()
    },
    //  招聘会列表接口请求
    jobfairList () {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      if (this.jobtypeStatusVal == 2) {
        this.jobtypeStatusVal = 3
      }
      let obj = {
        'auditStatus': this.jobtypeStatusVal,
        'page': this.pagination.page,
        'size': 10
      }
      jobfairList(obj).then(data => {
        // 对请求出来的数据进行逻辑处理
        if (data.success) {
          loading.close()
          this.pagination.total = data.data.total
          // this.jobFairList = data.data.records
          this.jobFairStatusPost(data.data.records)
        } else {
          loading.close()
        }
      }).catch(err => {
        // console.log(err)
        loading.close()
        this.jobFairList = [{
          title: '数据错误',
          holdTime: '数据错误',
          sponsor: '数据错误',
          organizer: '数据错误',
        }]
      });
    },
    // 状态
    jobtypeStatus (val) {
      if (val == 0) {
        this.jobtypeStatusIndex = ''
        this.jobtypeStatusVal = ''
      } else {
        this.jobtypeStatusIndex = val
        this.jobtypeStatusVal = val - 1
      }
      this.pagination.page = 1
      this.jobfairList()
    },

    // 求招聘会的列表详情按钮状态
    jobFairStatusPost (arr) {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let obj = {}
      jobFairStatus(obj).then((data) => {
        if (data.success) {
          let jobFairStatus = data.data
          // 进行循环列表判断合并
          jobFairStatus.map((objVal, index) => {
            // 循环按钮状态
            let flag = false
            arr.map((btnStatus, j) => {
              if (btnStatus.id == objVal.jobFairId) {
                // console.log('有相同的 需要改变状态u')
                flag = true
              }
              if (flag) {
                btnStatus.auditStatus = objVal.auditStatus
                btnStatus.jobFairId = objVal.auditStatus
                // if (btnStatus.title == '测试重复展位') {
                //   console.log(objVal.auditStatus, '测试重复展位')
                // }
                // 已预约
                if (objVal.auditStatus == 0) {
                  btnStatus.auditStatusTwo = 6
                }
                // 预约已通过
                if (objVal.auditStatus == 1) {
                  btnStatus.auditStatusTwo = 6
                }
                // 未通过
                if (objVal.auditStatus == 2) {
                  btnStatus.auditStatusTwo = null
                }
                // 已结束
                if (objVal.auditStatus == 3) {
                  btnStatus.auditStatusTwo = null
                }
                flag = false
                // btnStatus = Object.assign(btnStatus, objVal)
              }
              // 时间字段拼接
              if (btnStatus.holdDateType == 1) {
                btnStatus.holdTime = (btnStatus.holdStartDate || '') + '    ' + (btnStatus.holdStartTime ? btnStatus.holdStartTime + ' - ' : '') + (btnStatus.holdEndTime || '')
              } else {
                btnStatus.holdTime = (btnStatus.holdStartDate ? btnStatus.holdStartDate : '') + (btnStatus.holdEndDate ? btnStatus.holdEndDate + '-' : '') + '     ' + (btnStatus.holdStartTime ? btnStatus.holdStartTime + '-' : '') + (btnStatus.holdEndTime || '')
              }
            })
            // 把btnStatus 对象与 objVal 对象进行合并
          })
          // console.log(arr, '列表')
          this.jobFairList = arr
          loading.close()
        } else {
          loading.close()
          this.$message('数据返回错误')
        }
      }).catch(() => {
        // this.$message('数据返回错误')
      })
    }
  },
  created () {
    // 招聘会列表接口请求
    this.jobfairList()
    // 求招聘会的列表详情按钮状态
    // this.jobFairStatusPost()
  }
}
</script>

<style scoped>
.job {
    background: rgba(246, 246, 248, 1);
}
.jobtypeStatus {
    width: 1200px;
    height: 70px;
    margin: 0 auto;
    margin-bottom: -18px;
    padding-left: 30px;
    display: flex;
    align-items: center;
}
.jobFairList {
    width: 1104px;
    height: 96px;
    margin: 16px auto 0 auto;
    background: #ffffff;
    opacity: 1;
    justify-content: space-between;
    align-items: center;
    padding: 22px 48px;
    display: flex;
    position: relative;
}
/* 置顶 */
.jobFair_roofPlacement {
    width: 58px;
    height: 58px;
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    /* background: red; */
    /* opacity: .3; */
}
.jobFair_name {
    font-size: 20px;
    color: #222222;
    line-height: 25px;
    position: relative;
    text-indent: 10px;
}
.jobFair_name a {
    font-size: 20px;
    color: #222222;
}
.jobFair_name:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    left: 0;
    top: 4px;
    background: #0093ff;
}
.jobFair_info {
    display: flex;
    justify-content: space-between;
    line-height: 45px;
}
.jobFair_Holding {
    height: 20px;
    font-size: 14px;
    display: inline-block;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.jobFair_Holding span:nth-child(1) {
    margin-right: 33px;
}

.jobFair_btnSee /deep/ .el-button {
    width: 216px;
    height: 46px;
    display: block;
    margin-top: 5px;
    margin-left: 10px;
}
.jobFair_btnSee /deep/ .el-button span {
    opacity: 1;
    text-align: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}
.jobFair_SponsorUnit {
    display: inline-block;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 30px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.jobFair_SponsorUnit span:nth-child(1) {
    margin-right: 33px;
}
.jobtypeStatus /deep/ .span-onlineBooking {
    background: #409eff !important;
    color: #fff !important;
}
.jobFair_btnSee /deep/ .span-booked,
.jobtypeStatus /deep/ .span-booked {
    background: rgba(177, 222, 255, 1);
}
.jobFair_btnSee /deep/ .span-hasEnded,
.jobtypeStatus /deep/ .span-hasEnded {
    background: rgba(204, 204, 204, 1);
}
.jobtypeStatus /deep/ .span-hasEnded {
    margin-left: 32px;
    border-radius: 0px;
    color: #000;
}
.jobFair_btnSee /deep/ .span-appointmentpassed {
    background: rgba(0, 155, 62, 1);
}
.jobFair_btnSee /deep/ .span-notPass {
    background: rgba(253, 78, 64, 1);
}
.jobFair_btnSee /deep/ .el-button--primary,
.jobtypeStatus /deep/ .el-button--primary {
    border-color: rgb(0, 0, 0, 0);
    padding: 10px 20px;
}
.pagination /deep/ .el-pagination.is-background .el-pager li {
    background-color: #fff;
    border: 1px solid rgba(204, 204, 204, 1);
}
.pagination /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1893fc;
    color: #fff;
}
.noData {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    background: #ffffff;
}
</style>